<template>
	<view class="Z-QiTa-GengXin">
		<view class="XinXi">当前版本<text>v{{DangQianBanBen}}</text>，最新版本<text>v{{ZuiXin_BanBen}}</text></view>

		<view
			:class="MuBan_WenZi_XiaZai=='下载最新版'?'GengXin':'GengXin-YiDian'"
			v-if="ShiFou_You_XinBanBen"
			@click="DianJi_GengXin"
		>
			{{MuBan_WenZi_XiaZai}}
		</view>
		
		<view class="JinDu" v-if="ShiFou_You_XinBanBen">
			<view class="Zuo">
				<view :style="'width:'+XiaZai_JinDu+'%;'"></view>
			</view>
			<view class="You">{{XiaZai_JinDu}}%</view>
		</view>
		
		<view class="TiShi-XinXi" v-if="ShiFou_You_XinBanBen">
			<text>重要提示：</text>
			<view v-html="ShengJi_TiShi"></view>
		</view>
		<view v-if="GengXin_RiZhi" class="GengXin_RiZhi" v-html="GengXin_RiZhi"></view>
		<view class="TY-JiaZaiZhong-ZhuanQuan" style="width: 100%;padding: 50rpx 0;" v-else>
			<view class="TY-JiaZaiZhong-ZhuanQuan-1-Tu-width-50"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DangQianBanBen: "",
				ZuiXin_BanBen: "",
				ShiFou_You_XinBanBen:false,
				XiaZai_JinDu:"0",
				MuBan_WenZi_XiaZai:"下载最新版",
				GengXin_RiZhi:"",
				ShengJi_TiShi:`<p>此版本升级注意！</p>`,
				ShiFou_ChongZhi_App:false
			}
		},
		onLoad() {
			this.DangQianBanBen = plus.runtime.version;
			uni.request({
				url: this.$_PeiZhi_WenJian() + "App_GengXin.json",
				success: (res) => {
					this.ShengJi_TiShi += res.data.ShengJi_TiShi;
					this.ZuiXin_BanBen = res.data.ZuiXin_BanBen;
					this.XiaZai_DiZhi = res.data.XiaZai_DiZhi;
					this.ShiFou_ChongZhi_App = res.data.ChongZhi_App;
					this.GengXin_RiZhi = res.data.GengXin_RiZhi;
					if(this.DangQianBanBen == this.ZuiXin_BanBen){
						this.ShiFou_You_XinBanBen = false
					}else{
						this.ShiFou_You_XinBanBen = true
					}
				}
			});
		},
		methods: {
			DianJi_GengXin() {
				this.MuBan_WenZi_XiaZai = "下载中";
				const downloadTask = uni.downloadFile({
					url: this.XiaZai_DiZhi,
					success: (res) => {
						if (res.statusCode === 200) {
							let url = res.tempFilePath;
							uni.openDocument({
								filePath: url,
								success: (_res) => {
									if(this.ShiFou_ChongZhi_App){
										uni.clearStorage()
										uni.clearStorageSync()
									}
								}
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.XiaZai_JinDu = res.progress;
				});
			}
		},
	}
</script>

<style lang="scss">
.Z-QiTa-GengXin{
	view{
		font-size: 28rpx;
	}
	.TiShi-XinXi{
		margin: 25rpx 25rpx 0 25rpx;
		font-size: 22rpx;
		display: flex;
		text{
			color: var(--HongSe);
			flex-shrink: 0;
		}
		view{
			font-size: 22rpx;
			p:nth-child(1){
				color: var(--HongSe);
			}
		}
	}
	.XinXi{
		text-align: center;
		margin: 25rpx 0 0 0;
		text{
			color: #409EFF;
		}
	}
	.GengXin{
		width: 300rpx;
		height: 80rpx;
		background: #ffe60f;
		font-size: 28rpx;
		display: flex;
		align-items:center;
		justify-content:center;
		border-radius: 15rpx;
		margin: 25rpx auto auto auto;
	}
	.GengXin-YiDian{
		width: 0;
		height: 0;
		overflow: hidden;
		margin: 0;
	}
	.JinDu{
		margin: 25rpx 25rpx 0 25rpx;
		display: flex;
		align-items:center;
		.Zuo{
			flex: 1;
			height: 50rpx;
			background: #FFF;
			border-radius: 100rpx;
			border: 1rpx solid #EBEEF5;
			overflow: hidden;
			view{
				height: 50rpx;
				background: #409EFF;
			}
		}
		.You{
			margin: 0 0 0 25rpx;
		}
	}
}
.GengXin_RiZhi{
	padding-bottom: 25rpx;
	h2{
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 20rpx 25rpx;
		background: #F5F7FA;
		border: 1rpx solid #EBEEF5;
		border-left: 10rpx solid #409EFF;
		margin-top: 25rpx;
		font-weight: normal;
	}
	p{
		margin: 25rpx 25rpx 0 25rpx;
		font-size: 28rpx;
	}
}
</style>